<template>
  <div>
     <div class="my-search">
      <i @click="goback" class="iconfont icon-xiangzuo btnLeft"></i>
      <p>我的喜欢</p>
    </div>
    <div class="find-content">
      <ul>
        <li v-for="(item, index) in likeData" v-bind:key="index">
          <!-- 传值 -->
          <router-link
           v-bind:to="{name:'Comment',query:{id:`${item.uuid}`}}"
          >
          <img :src="`${item.cover}`" alt="" />
            <p>
              {{item.content}}
            </p>
          <span>{{item.author}}</span>
          </router-link>
        </li>
             <!-- 点击加载更多 -->
             <p class="notxt">没有更多啦^~^</p>
      </ul>
 
    
    </div>
  </div>
</template>
<script>
export default {
  name: "myLove",
  data() {
    return {
      likeData: [],
      likeId: [],
      obj: {},
    };
  },
  methods: {
    //方法
    geData() {
      let pro = axios.get("./data.json");
      pro.then((res) => {
        this.obj = res.data.data.list;
        // 请求成功就调用
        this.checkData();
      });
    },
    // 循环数据，判断
    checkData() {
      //  console.log('test');
      for (let i = 0; i < this.obj.length; i++) {
        // console.log('所有uuid',this.obj[i].uuid);
        // console.log('专辑',this.obj[i].album);

        for (let j = 0; j < this.likeId.length; j++) {
          if (this.obj[i].uuid == this.likeId[j]) {
            this.likeData.push(this.obj[i]);
            console.log('你喜欢的文案====>',this.likeData);
          }
        }
      }
       console.log('唯一id',this.likeId);
    },
     goback() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.geData();
   
   // sessionStorage.getItem("key")
   // console.log(JSON.parse(sessionStorage.getItem("key")));
  
//   let aaa =  JSON.parse(userJsonStr);
   // console.log(aaa);

   this.likeId = JSON.parse(sessionStorage.getItem("key"))
   // console.log(this.likeId);
  },
};
</script>

<style lang="scss" scoped>
.my-search {
  z-index: 99;
  width: 100%;
  height: 46px;
  background: #7ab4ff;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
//   justify-content: space-around;
//   align-items: center;
 i{
    width: 46px;
    height: 46px;
    font-size: 46px;
    color: rgb(255, 255, 255);
 }
 p{
    height: 46px;
   line-height: 46px;
   color: rgb(255, 255, 255);
   font-size: 20px;
 }
}
.find-content {
  width: 100%;
  margin-bottom: 56px;
  margin-top: 56px;
  ul {
    width: 344px;
    margin: 0 auto;
    border-radius: 7px;

    li {
      width: 310px;
      padding: 16px 17px;
      border: 1px solid rgb(238, 238, 238);
      box-shadow:  0 0 3px #bbb;
      background: #fff;
      margin-bottom: 10px;
      border-radius: 7px;
      //   box-sizing: border-box;
      img {
        margin-bottom: 16px;
        width: 310px;
        height: 176px;
        border-radius: 7px;
      }
      p {
        font-size: 16px;
        width: 100%;
        letter-spacing: 1.8px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
      }
      span {
        width: 100%;
        display: inline-block;
        text-align: right;
        letter-spacing: 1.8px;
        font-size: 12px;
        margin: 12px 0;
      }
    }
  }
}
.notxt{
  width: 100%;
  text-align: center;
  font-size: 16px;
  margin: 30px 0 100px;
  color: #ccc;
}
</style>